/* 
*常用的公共样式
 */
// 引入了zoom以支持IE6/7
// 同时加入:before以解决现代浏览器上边距折叠的问题
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

/* 
	按钮样式
 */
.btn {
	&{
		display: inline-block;
		text-align: center;
		cursor: pointer;
		padding: 0 10px;
		border: 1px solid #eee;
    	height: 36px;
    	line-height: 36px;
    	color: @color-1;
    	margin: 0 10px;
    	min-width: 60px;
	}
	&:hover{
		background: @btn-hover-bg;
	}
}

.btn-tint{
	&{
		background: @btn-tint-bg-2;
		color: @color;
	}
	&:hover{
		background: @btn-tint-bg-3;
	}
}
.btn-gray{
	&{
		background: @border-color-1;
		
	}
	&:hover{
		background: @border-color-2;
	}
}

/* 
* icon 样式
 */
.icon{
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 10px;
  vertical-align: middle;
}

// border样式
.border (@width: 1px; @type: solid; @color: #e4e4e4) {
	border: @width @type @color;
}
.border-bottom (@width: 1px; @type: solid; @color: #e4e4e4) {
	border-bottom: @width @type @color;
}
.border-left (@width: 1px; @type: solid; @color: #e4e4e4) {
	border-left: @width @type @color;
}
.border-right (@width: 1px; @type: solid; @color: #e4e4e4) {
	border-right: @width @type @color;
}
.border-top (@width: 1px; @type: solid; @color: #e4e4e4) {
	border-top: @width @type @color;
}

.box-shadow (@x: 0; @y: 2px; @blur: 8px; @spread: 0px; @color: #ddd) {
	box-shadow: @x @y @blur @spread @color;
}

// 过度效果

.transition(@property:all; @duration: 0.5s; @function:linear; @delay:0s;) {
  transition: @property @duration @function @delay;
}

// input 样式
.line{
	margin-bottom: 16px;
}
.input{
	&{
		.border;
		.transition(@property: box-shadow);
		padding: 0 10px;
		margin: 0 10px;
		height: 36px;
		line-height: 36px;
		font-size: @ft-size;
		color: @color-1;
		width: 280px;
	}
	&:focus{
		border-color: @btn-tint-bg-2;
		.box-shadow(@color:@btn-tint-bg-2; @y: 0; @blur: 4px;);
	}
}
// 自定义滚动条样式
.scrollbar(
	@width: 6px;
	@height: 6px;
	@btndisplay: none;
	@trackbg: @main-tint-bg;
	@trackpiecebg: @main-dark-bg;
	@trumbbg: #00C1DE;
	@thumbradius: 4px;){
	//滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
	&::-webkit-scrollbar {
		width: @width;
		height: @height;
	}
	 //滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
	&::-webkit-scrollbar-button {
		display: @btndisplay;
	}
	// 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果
	&::-webkit-scrollbar-track {
		backsground: @trackbg;
	}
	//内层轨道，滚动条中间部分
	&::-webkit-scrollbar-track-piece {
		background: @trackpiecebg;
	}
	//滚动条里面可以拖动的那部分
	&::-webkit-scrollbar-thumb{
		background: @trumbbg;
		border-radius:@thumbradius;
		cursor: pointer;
	}
	//边角
	&::-webkit-scrollbar-corner {
		background: @trumbbg;
	}
	 //定义右下角拖动块的样式
	&::-webkit-scrollbar-resizer  {
		background: @trumbbg;
	}
}
// 淡出效果

.fadeOut(@time: 1s; @duration: .2s; @type: ease; @property: both;){
		-webkit-animation:fadeOut @time @duration @type @property;
		-moz-animation:fadeOut @time @duration @type @property;
		animation:fadeOut @time @duration @type @property;
		// -webkit-animation-name:fadeOut;
		// -moz-animation-name:fadeOut;
		// animation-name:fadeOut;
	}

